<template>
  <div class="h100 commonTableSty statisticsEcuTableBox" ref="statisticsEcuTableBox">
    <a-table
      :columns="columns"
      :data-source="tbData"
      :pagination="false"
      :loading="loadingPageData"
      :scroll="{ y: scrollDomMaxScrollHeight }"
      row-key="id"
    >
      <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
        <table-ellipsis :text="text" :key="column.dataIndex"></table-ellipsis>
      </template>
      <template
        slot="partNumber"
        slot-scope="text,record"
      >
        <table-ellipsis
          v-if="record.ecu"
          :text="record.ecu.partNumber"
        ></table-ellipsis>
      </template>
      <template
        slot="partName"
        slot-scope="text,record"
      >
        <table-ellipsis
          v-if="record.ecu"
          :text="record.ecu.name"
        ></table-ellipsis>
      </template>
      <template
        slot="wholePackage"
        slot-scope="text,record"
      >
        <span v-if="record.wholePackageCount">{{ $t('uploaded') }}</span>
        <span v-else>{{ $t('noUploaded') }}</span>
      </template>
      <template
        slot="differentialNum"
        slot-scope="text,record"
      >
        <span>{{ record.patchPackageCount || 0 }}</span>
      </template>
      <template
        slot="retryCount"
        slot-scope="text"
      >
        <span v-if="text===-1">{{ $t('unlimited') }}</span>
        <span v-else>{{ text }}</span>
      </template>
      <template
        slot="versionValidity"
        slot-scope="text,record"
      >
        <span v-if="record.enabled">{{ $t('activated') }}</span>
        <span v-else>{{ $t('stoped') }}</span>

      </template>
      <template
        slot="blackList"
        slot-scope="text,record"
      >
        <a @click="doAction('blackList',record)">{{ record.blackList || 0 }}</a>
      </template>
      <!-- 关联版本 -->
      <template
        slot="versionList"
        slot-scope="text,record"
      >
        <a
          @click="doAction('relatedVersion',record)"
          v-if="Array.isArray(record.versionIds)&&record.versionIds.length"
        >
          <i class="iconfont icon-banben"></i>
          <span style="font-weight:bolder"> {{ record.versionIds.length }}</span>
        </a>
        <div v-else>
          <i class="iconfont icon-banben"></i>
          <span> 0</span>
        </div>
      </template>
      <!-- 关联车型 -->
      <template
        slot="modelList"
        slot-scope="text,record"
      >
        <a
          @click="doAction('relatedModel',record)"
          v-if="Array.isArray(record.modelIds)&&record.modelIds.length"
        >
          <i class="iconfont icon-chexing"></i>
          <span style="font-weight:bolder"> {{ record.modelIds.length }}</span>
        </a>
        <div v-else>
          <i class="iconfont icon-chexing"></i>
          <span>0</span>
        </div>
      </template>
      <template
        slot="createTime"
        slot-scope="text"
      >
        <table-ellipsis :text="text|moment('YYYY-MM-DD HH:mm:ss')"></table-ellipsis>
      </template>
    </a-table></div>
</template>
<script>
import { mixinScrollLoadData } from '@/utils/mixin'
import { statisticsVersionTbColumns } from '../config/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import versionApi from '@/api/modules/software/partsVersion'
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  components: {
    tableEllipsis
  },
  mixins: [mixinScrollLoadData],
  computed: {
    ...mapState({
      queryParams: (state) => state.statisticsVersion.queryParams
    }),
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  data () {
    return {
      tbData: [],
      pageSize: 15,
      scrollDomRef: 'statisticsEcuTableBox',
      columns: statisticsVersionTbColumns,
      totalPage: 0,
      totalData: 0
    }
  },
  watch: {
  },
  created () {
    this.loadPageData()
  },
  mounted () {
  },
  methods: {
    loadPageData () {
      return new Promise((resolve, reject) => {
        this.loadingPageData = true
        versionApi.getVersionList({ ...this.queryParams, pageSize: this.pageSize, pageNo: this.pageCount })
          .then(res => {
            let { data } = res
            if (this.pageCount > 1) {
              data = this.tbData.concat(data)
            }
            this.tbData = data
            this.totalPage = res.totalPage
            this.totalData = res.totalCount
            resolve(true)
          }).catch(err => {
            reject(err)
          }).finally(() => {
            this.loadingPageData = false
          })
      })
    },
    getDateTime (datetime) {
      return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
    },
    doAction (key, rowData) {
      if (this[key]) {
        this[key](rowData)
        return
      }
      this.$emit('clickbtn', { type: key, data: rowData })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
